﻿@section scripts {
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

<script>
    const { createApp, ref, watchEffect } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;

    const app = createApp({
        setup() {
            const formData = ref({
                ffk_id: '',
                first_kind_id: '',
                first_kind_name: '',
                first_kind_salary_id: '',
                first_kind_sale_id: ''
            });

            // 从URL参数初始化表单数据
            const initFormData = () => {
                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const encodedData = urlParams.get('data');

                if (encodedData) {
                    try {
                        const data = JSON.parse(decodeURIComponent(encodedData));
                        formData.value = data;
                        formData.value.ffk_id = data.ffk_id; // 修正数据赋值语法
                        console.log("初始化表单数据:", data);
                    } catch (error) {
                        console.error("解析数据失败:", error);
                        ElMessage.error('数据加载失败');
                    }
                    console.log("id", formData.value.ffk_id);
                }
            };

            // 提交修改
            const submitForm = async () => {
                console.log('提交的数据:', formData.value)
                // 简单的表单验证，可根据实际需求扩展
                if (!formData.value.first_kind_id ||!formData.value.first_kind_name) {
                    ElMessage.error('I级机构编号和I级机构名称为必填项');
                    return;
                }

                try {
                    const response = await axios.post(
                        "@Url.Action("Update", "config")",
                        formData.value,
                        { headers: { "Content-Type": "application/json" } }
                    );

                    if (response.data.success) {
                        ElMessage.success('修改成功');
                        window.location.href = "@Url.Action("file_first_kind", "config")";
                    } else {
                        ElMessageBox.alert({
                            title: '修改失败',
                            message: response.data.message,
                            type: 'error'
                        });
                    }
                } catch (error) {
                    if (error.response) {
                        // 处理后端返回的具体错误
                        const errorMessage = error.response.data?.message || '服务器返回错误，请检查';
                        ElMessageBox.alert({
                            title: '服务器错误',
                            message: errorMessage,
                            type: 'error'
                        });
                    } else {
                        ElMessage.error('网络错误，请重试');
                    }
                    console.error('请求错误:', error);
                }
            };

            // 页面加载时初始化
            watchEffect(() => {
                initFormData();
            });

            return {
                formData,
                submitForm
            };
        }
    });

    app.use(ElementPlus);
    app.mount('#vue-app');
</script>
}

<div id="vue-app">
    <div class="config-file-first-kind">
        <div class="breadcrumb">
            <font color="black">
                您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--I级机构设置--I级机构修改
            </font>
        </div>

        <el-form :model="formData" label-width="120px">
            <el-form-item label="I级机构编号">
                <el-input v-model="formData.first_kind_id"></el-input>
                <!-- 通常ID不允许修改，可设置为disabled -->
            </el-form-item>

            <el-form-item label="I级机构名称">
                <el-input v-model="formData.first_kind_name"></el-input>
            </el-form-item>

            <el-form-item label="薪酬发放责任人编号">
                <el-input v-model="formData.first_kind_salary_id" type="textarea" :rows="4"></el-input>
            </el-form-item>

            <el-form-item label="销售责任人编号">
                <el-input v-model="formData.first_kind_sale_id" type="textarea" :rows="4"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" v-on:click="submitForm">保存修改</el-button>
                <el-button v-on:click="window.history.back()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>